<template>
    <div class="perspective-photo">
      <div id="stage">
        <div id="container">
          <div class='example'>
            <router-link :to="{ name: 'classicOne'}"><span>技术</span></router-link>
          </div>
          <div class='example'>
            <router-link :to="{ name: 'classicTwo' }"><span>生活</span></router-link>
          </div>
          <div class='example'>
            <router-link :to="{ name: 'classicThree' }"><span>梦想</span></router-link>
          </div>
          <div class='example'>
            <router-link :to="{ name: 'classicFour' }"><span>创作</span></router-link>
          </div>
          <div class='example'>
            <router-link :to="{ name: 'classicFive' }"><span>精品摘抄</span></router-link>
          </div>
          <div class='example'>
            <router-link :to="{ name: 'classicSix' }"><span>杂七杂八</span></router-link>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.perspective-photo{
    position:absolute;
    width:100%;
    height:60px;
    top:60px;
    left: 0;
    background-color:#fff;
    zoom:1.5
}
.perspective-photo #stage{
    width:100%;
    height:60px;
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
    -webkit-transition:top .5s;
    -moz-transition:top .5s;
    transition:top .5s;
    position:relative
}
.example span{
    color:#606571
}
.perspective-photo #container{
    position:absolute;
    width:64px;
    height:36px;
    left:50%;
    top:50%;
    margin-left:-32px;
    margin-top:-18px;
    cursor:pointer;
    -webkit-transition:-webkit-transform 1s;
    -moz-transition:-moz-transform 1s;
    transition:transform 1s;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-animation:photoRotate 18s ease-in-out infinite 2s;
    animation:photoRotate 18s ease-in-out infinite 2s
}
.perspective-photo .piece{
    width:128px;overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.5);
    -webkit-transition:opacity 1s,-webkit-transform 1s;
    -moz-transition:opacity 1s,-moz-transform 1s;
    transition:opacity 1s,transform 1s;
    position:absolute;
    bottom:0
 }
.perspective-photo .example{
    width:64px;
    height:36px;
    line-height:36px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.5);
    -webkit-transition:opacity 1s,-webkit-transform 1s;
    -moz-transition:opacity 1s,-moz-transform 1s;
    transition:opacity 1s,transform 1s;
    position:absolute;
    bottom:0
}
.perspective-photo .example:nth-child(1){
    -webkit-transform:rotateY(0) translateZ(98px);
    transform:rotateY(0) translateZ(98px);
    background-color:rgba(153,204,204,.8)
}
.perspective-photo .example:nth-child(2){
    -webkit-transform:rotateY(60deg) translateZ(98px);
    transform:rotateY(60deg) translateZ(98px);
    background-color:rgba(153,204,204,.8)
    }
.perspective-photo .example:nth-child(3){
    -webkit-transform:rotateY(120deg) translateZ(98px);
    transform:rotateY(120deg) translateZ(98px);
    background-color:rgba(153,204,204,.8)
}
.perspective-photo .example:nth-child(4){
    -webkit-transform:rotateY(180deg) translateZ(98px);
    transform:rotateY(180deg) translateZ(98px);
    background-color:rgba(153,204,204,.8)}
.perspective-photo .example:nth-child(5){
    -webkit-transform:rotateY(240deg) translateZ(98px);
    transform:rotateY(240deg) translateZ(98px);
    background-color:rgba(153,204,204,.8)
 }
.perspective-photo .example:nth-child(6){
    -webkit-transform:rotateY(300deg) translateZ(98px);
    transform:rotateY(300deg) translateZ(98px);
    background-color:rgba(153,204,204,.8)
 }
 @-webkit-keyframes photoRotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  16.7% {
    -webkit-transform: rotateY(60deg);
    transform: rotateY(60deg);
  }
  33.3% {
    -webkit-transform: rotateY(120deg);
    transform: rotateY(120deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  66.7% {
    -webkit-transform: rotateY(240deg);
    transform: rotateY(240deg);
  }
  83.3% {
    -webkit-transform: rotateY(300deg);
    transform: rotateY(300deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes photoRotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  16.7% {
    -webkit-transform: rotateY(60deg);
    transform: rotateY(60deg);
  }
  33.3% {
    -webkit-transform: rotateY(120deg);
    transform: rotateY(120deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  66.7% {
    -webkit-transform: rotateY(240deg);
    transform: rotateY(240deg);
  }
  83.3% {
    -webkit-transform: rotateY(300deg);
    transform: rotateY(300deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
</style>
